<script setup>
import router from "../router/index.js";
import MyIcon from "../components/MyIcon.vue";
import MyList from "../components/MyList.vue";
import { shallowRef } from "vue";
import { useDark, useToggle } from "@vueuse/core";
import { ElNotification } from "element-plus";
import { MINIO_AVATAR } from "../const/index.js";
import { PROJECT_INFO, PROJECT_NAME, PROJECT_SKILL } from "../const/project.js";
import { LOCAL_RES } from "../util/index.js";
import {notYet} from "../util/index.js";

// 当前登录的用户信息
const loginUser = JSON.parse(sessionStorage.getItem('loginUser'));

// 用户菜单
// 当前选中权限的index值：默认选中当前路由路径
let currentMenuIndex = shallowRef(router.currentRoute.value['path']);

// 左侧权限列表是否折叠：向左收缩
const isCollapse = shallowRef(false);

// 当前登录的用户的菜单列表
const loginMenus = JSON.parse(sessionStorage.getItem('loginMenus'));

// 项目信息抽屉
const projectInfoDrawer = shallowRef();

/** 打开项目信息抽屉 */
function openProjectInfoDrawer() {
  projectInfoDrawer.value = true;
}

// 项目技术栈抽屉
const projectSkillDrawer = shallowRef();

/** 打开项目技术栈抽屉 */
function openProjectSkillDrawer() {
  projectSkillDrawer.value = true;
}

// 日历抽屉，日历数据（本地时间）
const calendarDrawer = shallowRef();
let calendarData = shallowRef(new Date());

/** 打开日历抽屉 */
function openCalendarDrawer() {
  calendarDrawer.value = true;
}

// 系统通知
/** ElNotification右下角通知：'暂无通知消息' */
function notify() {
  ElNotification.info({
    title: '通知列表',
    message: '暂无通知消息',
    position: 'bottom-right',
  });
}

// 路由跳转
/** 路由到 '/Personal' */
function toPersonal() {
  router.push('/Personal');
}

/** 路由到 '/PersonalUpdate' */
function toPersonalUpdate() {
  router.push('/PersonalUpdate');
}

// 退出登录
function logout() {
  router.push('/');
}

/** 根据localStorage判断，当前是否正在使用暗黑模式 */
const currentTheme = shallowRef(localStorage.getItem('vue-color-scheme') === 'auto');
const toggleTheme = useToggle(useDark());
</script>
<template>
  <el-container class="main-body">
    <el-aside class="main-body-left"
              width="collapse"
              max-width="200px">
      <el-menu class="menus-menu el-menu-vertical-demo"
               unique-opened
               router
               :collapse="isCollapse"
               :default-active="currentMenuIndex">
        <el-image class="logo" :src="LOCAL_RES('../assets/image/logo.png')"/>
        <el-menu-item class="house-item"
                      index="/DashBoard"
                      title="回到后台项目首页">
          <my-icon icon="House" label="DashBoard"/>
        </el-menu-item>
        <el-sub-menu class="menus"
                     v-for="(menu, i) in loginMenus"
                     :key="menu['id']"
                     :index="i.toString()"
                     :title="menu['info']">
          <template #title>
            <my-icon :icon="menu['icon']" :label="menu['title']"/>
          </template>
          <el-menu-item class="sub-menus"
                        v-for="subMenu in menu['subMenus']"
                        :key="subMenu['id']"
                        :index="subMenu['url']"
                        :title="subMenu['info']">
            <my-icon :icon="subMenu['icon']" :label="subMenu['title']"/>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container class="main-body-right">
      <el-header class="main-body-right-head">
        <el-row class="is-align-middle">
          <el-col class="fold-expand-col" :span="2">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="!isCollapse">
                <my-icon :size="20" :icon="!isCollapse ? 'Fold' : 'Expand'"/>
              </el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col class="project-name-col" :span="7">{{ PROJECT_NAME }}</el-col>
          <el-col class="operation-btn-col" :span="7" :offset="4">
            <el-divider direction="vertical"/>
            <el-button icon="search" title="全局搜索" size="small" round @click="notYet"/>
            <el-button icon="bell" title="系统通知" size="small" round @click="notify"/>
            <el-button icon="list" title="项目信息" size="small" round @click="openProjectInfoDrawer"/>
            <el-button icon="document" title="技术栈信息" size="small" round @click="openProjectSkillDrawer"/>
            <el-button icon="calendar" title="系统时间" size="small" round @click="openCalendarDrawer"/>
            <el-divider direction="vertical"/>
            <el-switch class="theme-switch"
                       title="开启暗黑模式"
                       inline-prompt
                       v-model="currentTheme"
                       :active-action-icon="'Moon'"
                       :inactive-action-icon="'Sunny'"
                       @change="toggleTheme"/>
            <el-divider direction="vertic al"/>
          </el-col>
          <el-col class="nickname-col"
                  :span="3"
                  v-if="loginUser['nickname']">
            {{ loginUser['nickname'] }}
          </el-col>
          <el-col class="avatar-col"
                  :span="1"
                  v-if="loginUser['avatar']">
            <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-avatar class="avatar" :size="45" :src="MINIO_AVATAR(loginUser['avatar'])"/>
            </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="InfoFilled" @click="toPersonal">
                    查看个人信息
                  </el-dropdown-item>
                  <el-dropdown-item icon="Edit" @click="toPersonalUpdate">
                    修改个人信息
                  </el-dropdown-item>
                  <el-dropdown-item icon="WarnTriangleFilled"
                                    @click="logout">
                    <el-text type="danger">退出登录</el-text>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="main-body-right-main">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
  <el-drawer class="calendar-drawer" title="当前时间" v-model="calendarDrawer" size="50%">
    <el-calendar v-model="calendarData"/>
  </el-drawer>
  <el-drawer class="project-info-drawer" v-model="projectInfoDrawer" size="70%">
    <my-list title="项目系统信息" :items="PROJECT_INFO" :column="2"/>
  </el-drawer>
  <el-drawer class="project-skill-drawer" v-model="projectSkillDrawer" size="50%">
    <my-list title="项目技术栈信息" :items="PROJECT_SKILL"/>
  </el-drawer>
</template>
<style scoped lang="scss">
.main-body-left {
  height: 100vh; // 高度
  border-right: 1px solid #cccccc; // 右边框
  .logo {
    margin: 10px; // 外边距
    border-radius: 10%; // 圆角
    box-shadow: 1px 1px 1px gray; // 阴影
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px; // 宽度
    height: 100vh; // 高度
    letter-spacing: 2px; // 字间距
  }
  .el-icon {
    margin: 0 10px; // 上下外边距 左右外边距
  }
}
.main-body-right-head {
  .project-name-col {
    font-weight: bolder; // 加粗
    font-size: 1.5rem; // 字号倍率
  }
  .operation-btn-col {
    text-align: center; // 内容居中
    .theme-switch {
      --el-switch-on-color: #2C2C2C; // 选中时的颜色
      --el-switch-off-color: #F2F2F2; // 取消选择时的颜色
    }
  }
  .nickname-col {
    text-align: right; // 右对齐
    height: 50px; // 高度
    display: inline-block; // 内联块
    text-shadow: 2px 2px 2px gray; // 文字阴影
    line-height: 50px; // 行高
  }
  .avatar-col {
    text-align: right; // 右对齐
  }
  .avatar {
    margin: 10px; // 外边距
    outline: 1px solid #854040; // 轮廓
    border: 1px solid #854040; // 边框
  }
}
</style>